<template>
	<view>
		
		<view>
			<view class="examPage">
				<u-navbar :title="'支付订单'" :custom-back="customBacks" :immersive="false" :is-back="true" :background="background"
					:border-bottom="false"></u-navbar>
				<view style="height: 100rpx;"></view>
				<view class="pay_wrap">
					<view class="pay_time">支付剩余时间<u-count-down :timestamp="1800"></u-count-down></view>
					<view class="pay_price"><text>¥</text>{{price}}</view>
					<view class="sub_name">{{shopName}}</view>
				</view>

				<view class="Pay_type">
					<view class="type_item u-flex" v-for="(item,index) in payType" :key="index" @click="myYUe > '0.00' && myYUe >= price?xuanzePayType(item,index):null">
						<view class="yebuzu" v-if="item.is_balance == true && (myYUe == '0.00' || myYUe < price)">余额不足</view>
						<view class="pay_name u-flex">
							<image :src="item.icon"></image>
							<view>{{item.name}}<span v-if="item.is_balance == true">剩余¥{{myYUe || '0.00'}}</span></view>
						</view>
						<view class="choose_icon">
							<image :src="imgurlBwc + '/image/choose_2.png'" v-if="payTypeidx == index"></image>
							<image :src="imgurlBwc + '/image/choose_1.png'" v-else-if="myYUe > '0.00' && myYUe >= price"></image>
						</view>
					</view>
				</view>


				<view class="bottom-btn-wrap">
					<view class="bottom-fixed-btn" @click="TopPaySuccess()">
						<view class="btn pay">确认支付</view>
					</view>
				</view>
			</view>
		</view>
    <!--放弃支付-->
    <u-popup v-model="cancel_order_popup" mode="center" width="600" border-radius="20">
      <view class="tc_wrap" v-if="order_item">
        <view style="height: 10rpx"></view>
        <view style="font-size: 32rpx;font-weight: bold">真的要放弃
          <text style="color: #FF7A00">￥{{ order_item.rebate_amount }}</text>
          的套餐优惠吗？
        </view>
        <view class="u-flex" style="color: #999999;font-size: 24rpx;margin-top: 30rpx;justify-content: center">
          <u-count-down
              v-if="cancel_order_popup"
              :timestamp="findcountdown(order_item)"
              :show-days="true"
              :show-border="true"
              font-size="20"
              color="#FF4E0D"
              bgColor="#fff"
              border-color="#ffffff"
              separator="zh"
              separator-size="20"
              separator-color="#FF4E0D">
          </u-count-down>
          后自动取消订单
        </view>
        <view
            style="background-color: #f2f2f2;font-size: 24rpx;color: #3d3d3d;border-radius: 10rpx;padding: 20rpx;margin-top: 30rpx;display: flex">
          <image v-if="order_item.package && order_item.package.images" :src="order_item.package.images[0]" mode="aspectFill"
                 style="width: 120rpx;height: 120rpx;border-radius: 10rpx"></image>
          <view style="text-align: start">
            <view style="font-size: 28rpx;color: #666666;margin-left: 20rpx;font-weight: bold;width: 100%">
              {{ order_item.shop.name }}
            </view>
            <view style="font-size: 24rpx;color: #AAAAAA;margin-left: 20rpx;margin-top: 20rpx;width: 100%">
              {{ order_item.package_name }}
            </view>
          </view>
        </view>
        <view class="tc_images" style="margin: 20rpx 0;">
          <image :src="imgurlBwc+'/order/cancel@2x.png'" mode="aspectFill"
                 style="top: 0;right: 0;position: absolute"></image>
          <view style="position: relative;text-align: center;padding-top: 30rpx;color: white;font-size: 24rpx">
            <view>￥{{ order_item.rebate_amount }}</view>
            <view>返利</view>
          </view>
          <view style="display: flex">
            <view style="color: #FF9746;margin-top: -6rpx;font-size: 22rpx">
              原价￥{{ order_item.price }}
            </view>
            <view style="flex: 1"></view>
            <view style="color: #FF9746;margin-top: -6rpx;font-size: 22rpx">
              原价￥{{ order_item.price }}
            </view>
          </view>
          <view style="color: #FF6600;margin-top: 56rpx;font-size: 22rpx">
            探店价￥
            <text style="font-size: 39rpx">{{ order_item.price }}</text>
          </view>
        </view>
        <view class="tc_btn_box">
          <view class="lijipay1">
            <u-button hover-class="none" type="info" shape="circle" :ripple="false" @click="back()">
              残忍取消
            </u-button>
          </view>
          <view class="lijipay">
            <u-button hover-class="none" type="info" shape="circle" :ripple="false"
                      @click="TopPaySuccess()">支付锁定优惠
            </u-button>
          </view>

        </view>
      </view>
    </u-popup>
    <!--收集取消支付原因-->
    <u-popup v-model="isPayment" mode="bottom" :closeable="true" height="50%" border-radius="20">
      <view class="cancel-payment">
        <view class="cancel-payment-top">
          <view class="cancel-payment-title">取消支付原因</view>
          <u-line color="#F3F3F3" hair-line></u-line>
          <view class="cancel-payment-head">请选择取消订单原因</view>
        </view>
        <scroll-view scroll-y="true" class="cancel-payment-content">
          <u-radio-group>
            <u-radio
                @change="CancelPaymentChange"
                v-for="(item, index) in infoList" :key="index"
                :name="item.title"
                :disabled="item.disabled"
                :label-size="28"
                :icon-size="35"
                active-color="#FF7A00"
            >
              {{item.title}}
            </u-radio>
          </u-radio-group>
        </scroll-view>
        <view class="cancel-payment-bottom">
          <view class="cancel-payment-btn" @click="cancelPayment">确认</view>
        </view>
      </view>
    </u-popup>

	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				isShow: true, // 最开始设置为显示
				background: {
					backgroundColor: '#ffffff',
				},
        imgurlBwc: app.globalData.imgurlBwc,
        cancel_order_popup: false, // 取消订单弹窗
        isPayment: false, // 取消支付原因是否显示
				BestImgUrl: app.globalData.imgurl,
				order_id: "",
				shopName: "",
				price: "",
        order_item: {},
				
				payType:[
          {
            name: '余额支付',
            icon: app.globalData.imgurl + '/home_logo.png',
            type: 'balance',
            is_balance: true
          },{
            name: '微信支付',
            icon: app.globalData.imgurl + '/PackageDetails/Frame-3.png',
            type: 'applet_wechat',
            is_balance: false
          }
        ],
				payTypeidx: 0,
				payTypeName: 'balance',
				myYUe: '0.00',
        //取消支付原因列表
        infoList: [
          {
            id: 1,
            title: '计划有变没时间消费'
          },
          {
            id: 2,
            title: '买多了/买错了'
          },
          {
            id: 3,
            title: '后悔了，不想要'
          },
          {
            id: 4,
            title: '不会/不想写探店笔记'
          },
          {
            id: 5,
            title: '其他平台/店里活动更优惠'
          },
          {
            id: 6,
            title: '没看清使用规则，要用时发现限制很多'
          },
          {
            id: 7,
            title: '误以为是外卖'
          },
          {
            id: 8,
            title: '预约不上/排队太久'
          },
          {
            id: 9,
            title: '朋友/网上评价不好'
          },
          {
            id: 10,
            title: '商家停业/装修/转让'
          }
        ],
        cancelPaymentVal: '', //选中的取消支付原因
      }
		},
		onLoad(ops) {
			console.log('订购信息', ops)
			this.order_id = ops.order_id
			this.shopName = ops.name
			this.price = ops.price
			this.GetUserInfo()
      this.GetDatails()
		},

		methods: {
      //倒计时计算
      findcountdown(item) {
        const now = new Date().getTime();
        let endTime = new Date(item.end_time).getTime()
        let isend = endTime - now > 0 ? (endTime - now) : 0;
        let seconds = this.$moment(isend).unix();
        console.log('结束时间', seconds)
        return seconds
      },
      GetDatails() {
        let that = this
        that.$api.GetTanDianOrderDetails({
          order_id: this.order_id,
        }).then(res => {
          console.log('订单详情', res.data.result);
          that.order_item = res.data.result //订单详情
        }).catch(err => {
          that.langdings = false
        })
      },
			GetUserInfo() {
				let that = this
				that.$api.GetuserInfo({
			
				}).then(res => {
					console.log('个人信息', res.data.result);
					let ismybalance = parseFloat(res.data.result.money)//res.data.result.money || "0.00"
					that.myYUe = ismybalance
					//判断是否有余额, 并且余额大于订单金额
					if(ismybalance == "0.00"){
						console.log('1，余额不足定位到微信')
						//余额不足定位到微信
						that.payTypeidx = 1
						that.payTypeName = 'applet_wechat'
						//设置支付方式到缓存里面，以便订单详情待支付里面使用
						uni.setStorageSync("payTypes",'applet_wechat')
					} else if(ismybalance != "0.00" && ismybalance >= parseFloat(that.price)) {
						//我的余额大于订单金额可以使用余额支付
						console.log('2，我的余额大于订单金额可以使用余额支付')
						that.payTypeidx = 0
						that.payTypeName = 'balance'
						//设置支付方式到缓存里面，以便订单详情待支付里面使用
						uni.setStorageSync("payTypes",'balance')
					} else if(ismybalance != "0.00" && ismybalance < parseFloat(that.price)) {
						//我的余额小于订单金额使用微信支付
						console.log('3，我的余额小于订单金额使用微信支付')
						that.payTypeidx = 1
						that.payTypeName = 'applet_wechat'
						//设置支付方式到缓存里面，以便订单详情待支付里面使用
						uni.setStorageSync("payTypes",'applet_wechat')
					}
					
				}).catch(err => {
					
				});
			},
      back(){
        //关闭取消支付弹窗
        this.cancel_order_popup = false
        //打开取消支付原因弹窗
        this.isPayment = true

      },
      //取消支付选中radio
      CancelPaymentChange(e){
        this.cancelPaymentVal = e
      },
      //确认取消支付原因选项
      cancelPayment(){
        // 取消原因为空
        if (this.cancelPaymentVal == ''){
          uni.showToast({
            title: '请选择取消原因',
            icon: 'none',
            duration: 2000
          });
          return
        } else {
          //关闭取消支付原因弹窗
          this.isPayment = false
        }
        this.$api.TDquxiaoOrder({
          cancel_cause: this.cancelPaymentVal,
          order_id: this.order_id
        }).then(res => {
          //console.log('取消原因==', res.data.result)
          uni.showToast({
            title: res.data.msg,
            icon: 'none',
            duration: 2000
          });
          setTimeout(() => {
            uni.navigateBack()
          }, 1000)
        }).catch(err => {
          //console.log('取消订单==', err)
          uni.navigateBack()
          uni.showToast({
            title: err.data.msg,
            icon: 'none',
            duration: 2000
          });
        })

      },
			/* onBeforeLeave() {
         this.cancel_order_popup = true
				 let that = this
				 that.isShow = false
				 uni.showModal({
				 	title: '确定放弃付款?',
				 	content: '您的订单还未完成支付，请在订单取消前尽快完成支付。',
				 	confirmColor: '#FF4910',
				 	success: function(res) {
				 		if (res.confirm) {
				 			//console.log('用户点击确定');
				 			// uni.reLaunch({
				 			// 	url: '/subpackageA/pages/orders/orders?types=' + 1
				 			// })
				 			let data = {
				 				id: that.order_id
				 			}
				 			uni.reLaunch({
				 				url: '/subpackageA/pages/OrderDetails/OrderDetails?data=' + encodeURIComponent(JSON.stringify(data))
				 			})
				 		} else if (res.cancel) {
				 			//console.log('用户点击取消');
				 		}
				 	}
				 });

			 },*/
			customBacks() {
        this.cancel_order_popup = true
				/*this.isShow = false
				 let that = this
				 uni.showModal({
				 	title: '确定放弃付款?',
				 	content: '您的订单还未完成支付，请在订单取消前尽快完成支付。',
				 	confirmColor: '#FF4910',
				 	success: function(res) {
				 		if (res.confirm) {
				 			//console.log('用户点击确定');
				 			// uni.reLaunch({
				 			// 	url: '/subpackageA/pages/orders/orders?types=' + 1
				 			// })
				 			let data = {
				 				id: that.order_id
				 			}
				 			uni.reLaunch({
				 				url: '/subpackageA/pages/OrderDetails/OrderDetails?data=' + encodeURIComponent(JSON.stringify(data))
				 			})
				 		} else if (res.cancel) {
				 			//console.log('用户点击取消');
				 		}
				 	}
				 });*/
			},
			xuanzePayType(item,index){
				let that = this
				that.payTypeidx = index
				that.payTypeName = item.type
				//设置支付方式到缓存里面，以便订单详情待支付里面使用
				uni.setStorageSync("payTypes", item.type)
			},
			TopPaySuccess() {
        this.cancel_order_popup = false
				let that = this
				uni.showLoading({
					title: '支付中'
				})
				setTimeout(() => {
					that.$api.PayPackageOrder({
						order_id: that.order_id,
						pay_type: that.payTypeName //支付方式：applet_wechat小程序支付,wechat 公众号支付，app_wechat微信APP支付，alipay支付宝支付，app_alipay支付宝APP支付
					}).then(res => {
						console.log('支付参数', res.data.result);

						uni.hideLoading();
						
						if(that.payTypeName == 'balance'){
							
							uni.navigateTo({
								url: '/subpackageA/pages/PaySuccess/PaySuccess?order_id=' + that.order_id + '&name=' + that.shopName + '&price=' + that.price
							});
							
						} else if(that.payTypeName == 'applet_wechat') {
							uni.requestPayment({
								provider: "wxpay",
								timeStamp: res.data.result.timeStamp,
								nonceStr: res.data.result.nonceStr,
								package: res.data.result.package,
								signType: res.data.result.signType,
								paySign: res.data.result.paySign,
								success: function(reswxminapp) {
									uni.navigateTo({
										url: '/subpackageA/pages/PaySuccess/PaySuccess?order_id=' + that.order_id + '&name=' + that.shopName + '&price=' + that.price
									});
								},
								fail: function(errwxmini) {
									uni.showToast({
										title: '支付失败',
										icon: 'none'
									});
								}
							});
						}
						
					}).catch(err => {
						uni.showToast({
							title: err.data.msg,
							icon: 'none',
							duration: 3000
						});
						uni.hideLoading()
					});
				}, 2000)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F4F4F4;
		position: relative !important;
		top: 0px !important;
	}

	.pay_wrap {
		text-align: center;

		.pay_time {
			font-size: 24rpx;
			color: $zzy-text-color-666666;
		}

		.pay_price {
			font-size: 75rpx;
			font-weight: bold;
			margin: 10rpx 0 0 0;

			text {
				font-size: 36rpx;
			}
		}

		.sub_name {
			font-size: 24rpx;
			color: $zzy-text-color-666666;
		}
	}

	.Pay_type {
		padding: 30rpx;

		.type_item {
			background-color: #ffffff;
			border-radius: 20rpx;
			padding: 36rpx 42rpx;
			margin-bottom: 20rpx;
			position: relative;
			
			.yebuzu {
				position: absolute;
				top: 0;
				right: 0;
				z-index: 2;
				width: 172rpx;
				text-align: center;
				height: 56rpx;
				line-height: 56rpx;
				background-color: #FFEDE7;
				border-radius: 0 10px 0 10px;
				color: #FF4E0D;
			}

			.pay_name {
				align-items: center;

				image {
					width: 55rpx;
					height: 55rpx;
					margin-right: 22rpx;
					border-radius: 12rpx;
				}

				view {
					font-size: 32rpx;
					span {
						font-size: 28rpx;
						color: #666666;
						margin-left: 10rpx;
					}
				}
			}

			.choose_icon {
				margin-left: auto;

				image {
					width: 44rpx;
					height: 44rpx;
				}
			}
		}
	}
  .tc_wrap {
    background: linear-gradient(179deg, #FFF2EA 0%, #FFE5E4 5%, #fdf8f8 20%, #FFFFFF 50%, rgba(255, 255, 255, 0) 100%);;
    padding: 30rpx;
    text-align: center;

    .guanyu_title {
      font-size: 30rpx;
      font-weight: bold;
      margin-bottom: 10rpx;
    }

    .wenan {
      color: #999;
      margin-bottom: 20rpx;
    }

    .tc_images {
      width: 520rpx;
      height: 236rpx;
      position: relative;

      image {
        width: 520rpx;
        height: 236rpx;
      }
    }

    .steup_info {
      text-align: left;
      margin-top: 30rpx;

      .yqoiu {
        view:nth-child(1) {
          color: #666;
        }
      }

      .yqoiu2 {
        color: #666;

        span {
          color: #FE7B20;
        }
      }
    }

    .tc_info {
      view:nth-child(1) {
        font-weight: bold;
        font-size: 32rpx;
        margin-bottom: 20rpx;
      }

      view:nth-child(2) {
        font-size: 28rpx;
        color: #999;

        span {
          color: #FF4E0D;
        }
      }

      .gif_tu {
        width: 100%;
        height: 528rpx;
        border-radius: 20rpx;
      }
    }

    .tc_btn_box {
      display: flex;
      align-items: center;
      margin-top: 36rpx;
      justify-content: center;

      .tc_btn_huise {
        flex: 1;
        margin-right: 12rpx;
        background: linear-gradient(to right, #F7F7F7, 50%, #F7F7F7);
        border-radius: 200rpx;
        padding: 0 0;
        height: 80rpx !important;
        line-height: 80rpx !important;
        text-align: center;
        color: #333333;
      }

      .tc_btn_huise_err {
        flex: 1;
        background-image: linear-gradient(to right, #FF4E0D, #FF4E0D) !important;
        color: #fff;
        border-radius: 200rpx;
        padding: 0 0;
        height: 80rpx !important;
        line-height: 80rpx !important;
        text-align: center;
      }

      .lijipay1 {
        flex: 1;
        position: relative;
        width: 288rpx;
        margin: 0 20rpx 0 0;

        .u-size-default {
          height: 80rpx !important;
          line-height: 80rpx !important;
          background: linear-gradient(to right, #F7F7F7, 50%, #F7F7F7) !important;
          color: #333;
          border: none !important;
        }

        .u-hairline-border:after {
          border: none !important;
        }
      }

      .lijipay {
        flex: 1;
        position: relative;
        width: 288rpx;
        margin: 0 auto;

        .u-size-default {
          height: 80rpx !important;
          line-height: 80rpx !important;
          background-image: linear-gradient(to right, #F18F2C, #FF7A00) !important;
          color: #fff;
          border: none !important;
        }

        .u-hairline-border:after {
          border: none !important;
        }
      }
    }
  }
//  支付取消原因css
  .cancel-payment {
    padding: 0 34rpx;
    height: 100%;
    display: flex;
    flex-direction: column;
    .cancel-payment-top {
      height: 160rpx;
      .cancel-payment-title {
        font-size: 32rpx;
        font-weight: bold;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        color: #3D3D3D;
      }
      .cancel-payment-head {
        font-size: 28rpx;
        color: #888888;
        padding: 20rpx 0;
      }
    }
    .cancel-payment-content {
      height: 0;
      flex: 1;
      .u-radio{
        width: 100% !important;
        display: flex;
        justify-content: space-between;
        padding: 16rpx 0;
        .u-radio__icon-wrap {
          margin-right: 50rpx;
        }
        .u-radio__label {
          font-size: 28rpx;
          color: #3D3D3D;
          order: -1;
        }
      }
    }
    .cancel-payment-bottom {
      padding: 20rpx 0;
      .cancel-payment-btn {
        width: 90%;
        line-height: 80rpx;
        margin: 0 auto;
        color: #fff;
        font-size: 32rpx;
        text-align: center;
        background: linear-gradient( 104deg, #FF7800 0%, #FF7A00 100%);
        border-radius: 200rpx 200rpx 200rpx 200rpx;
      }
    }
  }
</style>